<template>
  <div class="tabelContainer">
    <basic-container>
      <el-form  :inline="true" class="crud_class demo-form-inline p_form">
        <el-form-item label="选择日期:">
          <el-date-picker v-model="query.time" type="date" size="small" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOption"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchBtn" size="small" icon="el-icon-search">搜索</el-button>
<!--          <el-button size="small" @click="cancelBtn" icon="el-icon-delete">清空</el-button>-->
        </el-form-item>
      </el-form>
      <avue-crud :data="data" :option="option" :page.sync="page" :table-loading="loading" @on-load="onLoad" @search-change="searchChange" @search-reset="searchReset" ref="crud" @row-del="rowDel">
        <template slot="ioFlag" slot-scope="scope">
          <el-tag size="small" type="warning" v-if="scope.row.ioFlag==='1'">出门</el-tag>
          <el-tag size="small" type="success" v-else>进门</el-tag>
        </template>
        <template slot="menuLeft" v-if="permission.inoutRealTime_export">
          <el-button :disabled="isExcel" type="warning" @click="handleExport" size="small" plain icon="el-icon-download">导出</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
  import { column } from "./column.js";
  import { getToken } from '@/util/auth';
  import mixmin from '@/config/mixmin'
  import { inAndOutList } from "@/api/dust/inoutRealTime"
  export default {
    name: "实时进出",
    data(){
      return{
        page: {
          currentPage: 1,
          total: 0,
          layout: "total,pager,prev,next",
          pageSize: this.$pageSize,
        },
        data:[],
        nowDate:'',
        option:{
          column:column,
          addBtn: false,
          editBtn: false,
          delBtn: false,
          viewBtn:false,
          excelBtn:false,
          tip: false,
          indexLabel:"序号",
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          dialogClickModal: false,
          selection: false,
          menu: false,
          refreshBtn: false,
          columnBtn: false,
          dateBtn:false,
          menuWidth:150
        },
        loading:false,
        query: {
          time:this.getNowDate()
        },
        isExcel:null
      }
    },
    mixins: [mixmin],
    watch:{
      "data":{
        handler(val){
          this.isExcel = val.length === 0;
        }
      }
    },
    methods:{
      getNowDate(){
        const nowDate = new Date();
        const date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          date: nowDate.getDate(),
        }
        const newmonth = date.month>10?date.month:'0'+date.month
        const day = date.date>10?date.date:'0'+date.date
        this.nowDate = date.year + '-' + newmonth + '-' + day
        return this.nowDate
      },
      onLoad(){
        this.loading = true
        inAndOutList(this.query.time?this.query.time:this.nowDate).then(item=>{
          this.data = item.data.data
          this.loading = false
        })
      },
      //导出
      handleExport() {
        this.$confirm("是否导出考勤数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$refs.crud.rowExcel()
          this.$message.success("操作成功")
        });
      },
      //自定义搜索清空事件
      cancelBtn() {
        this.query = {
          time:this.getNowDate()
        };
        this.page.currentPage = 1
        this.onLoad();
      },
      searchBtn() {
        this.page.currentPage = 1
        this.onLoad()
      },
    }
  }
</script>

<style scoped>
.crud_class{
  margin-bottom: -40px;
}
</style>
